/*---------- commonArea Start ----------*/
body { font: 0px/0px "Microsoft Yahei"; color: #000; background: #F4F4F4; }
input,select,option,textarea { border: 1px solid #ccc; box-sizing: border-box; outline: none; background: #fff;
	box-shadow: inset 0px 8px 8px -9px #888;
	-ms-box-shadow: inset 0px 8px 8px -9px #888;
	-webkit-box-shadow: inset 0px 8px 8px -9px #888;
	-moz-box-shadow: inset 0px 8px 8px -9px #888;
	-o-box-shadow: inset 0px 8px 8px -9px #888;

}
button { text-align: center; border: none; box-sizing: border-box; background: none;
/*	box-shadow: 1px 1px 4px #888;
	-ms-box-shadow: 1px 1px 4px #888;
	-webkit-box-shadow: 1px 1px 4px #888;
	-moz-box-shadow: 1px 1px 4px #888;
	-o-box-shadow: 1px 1px 4px #888;*/
}
.rotate {
	transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
}
.rotate.on {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
}
.empty { position: relative; height: 270px; box-sizing: border-box; background: url('../Images/icon_empty.png') center 30px / auto 240px no-repeat; }
.empty:before { content: '暂无内容'; position: absolute; left: 0; right: 0; bottom: 15px; font-size: 14px; font-weight: bold; line-height: 20px; text-align: center; color: #D6D6D6; }
/*---------- commonArea End ----------*/

#loading { display: none;
	position: fixed;
	top: 46%;
	left: 50%;
	background: rgba(0,0,0,0.8) url(../Images/icon_loading.gif) center no-repeat;
	z-index: 100;
	background-size: 36px;
	width: 100px;
	height: 100px;
	border-radius: 6px;
	transform: translate(-50%, -50%); z-index: 100; }

/*---------- listSearch Start ----------*/
#wrap .searchArea { text-align: center; }
#wrap .searchArea .cont { width: 90%; margin: 0 auto; padding-top: 20px; text-align: left; }
#wrap .searchArea .cont .search { position: relative; padding-right: 110px; }
#wrap .searchArea .cont .search .inputSearch { width: 100%; padding: 7px 15px; font-size: 14px; line-height: 20px; border-right: none; border-radius: 5px 0 0 5px; }
#wrap .searchArea .cont .search .btnSearch { position: absolute; top: 0; right: 70px; width: 40px; height: 36px; border-radius: 0 5px 5px 0; background: #258BF9 url('../Images/icon_search.png') center/16px no-repeat; }
#wrap .searchArea .cont .search .addNew { position: absolute; top: 0; right: 0; width: 60px; padding: 7px 0; font-size: 14px; line-height: 20px; color: #4689F1; border: 1px solid #4689F1; border-radius: 18px; }
#wrap .searchArea .cont .more { display: none; }
#wrap .searchArea .cont .more p { position: relative; padding: 10px 0 0 100px; }
#wrap .searchArea .cont .more p span { position: absolute; top: 10px; left: 0; width: 90px; font-size: 14px; line-height: 36px; }
#wrap .searchArea .cont .more p input { width: 100%; padding: 7px 15px; font-size: 14px; line-height: 20px; border-radius: 5px; }
#wrap .searchArea .cont .moreToggle { padding-top: 10px; font-size: 14px; line-height: 20px; text-align: right; color: #6c757d; }
#wrap .searchArea .cont .moreToggle .icon { display: inline-block; width: 16px; height: 20px; margin-right: 5px; vertical-align: top; background: url('../Images/icon_arrow.png') center/16px no-repeat; }
/*---------- listSearch End ----------*/

#wrap .listTabBar { overflow: hidden; margin-top: 20px; border-bottom: 1px solid #ccc; }
#wrap .listTabBar > ul > li { float: left; width: 50%; padding: 5px; font-size: 16px; line-height: 30px; text-align: center; box-sizing: border-box; background: #fff; }
#wrap .listTabBar > ul > li.on { color: #fff; background: #258BF9; }

/*---------- listView Start ----------*/
#wrap .listArea { padding: 20px 0; }
#wrap .listArea p { overflow: hidden; position: relative; min-height: 20px; padding: 2px 0 2px 70px; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
#wrap .listArea p.over { overflow: visible; text-overflow: clip; white-space: normal; }
#wrap .listArea p span { position: absolute; top: 2px; left: 0; width: 70px; color: #888; vertical-align: top; }

#wrap .listArea > ul > li { padding-top: 10px; }
#wrap .listArea > ul > li:first-child { padding-top: 0; }

#wrap .listArea > ul > li .info { position: relative; width: 100%; padding: 10px 5%; border: 1px solid #2C7FE9; box-sizing: border-box; background: #fff; }
#wrap .listArea > ul > li .info .icon { position: absolute; top: 15px; left: 3%; width: 16px; height: 16px; background: url('../Images/icon_arrow.png') center/16px no-repeat; }
#wrap .listArea > ul > li .info p { padding-left: 90px; margin-right: 70px; }
#wrap .listArea > ul > li .info p span { left: 20px; }
#wrap .listArea > ul > li .info .btn { position: absolute; right: 5%; width: 60px; padding: 7px 0; font-size: 14px; line-height: 20px; border-radius: 18px; }
#wrap .listArea > ul > li .info .btnModify { top: 15px; color: #fff; background: #4689F1; }
#wrap .listArea > ul > li .info .btnDelete { top: 65px; color: #C63520; border: 1px solid #C63520; }

#wrap .listArea > ul > li .moreInfo { display: none; padding: 0 5%;}
#wrap .listArea > ul > li .moreInfo .cont { padding: 0 10px 20px; border-radius: 0 0 10px 10px; background: #E0E9F4; }
#wrap .listArea > ul > li .moreInfo .cont .title { padding: 10px 0 5px; font-size: 14px; font-weight: bold; line-height: 20px; }
#wrap .listArea > ul > li .moreInfo .cont > ul > li { margin-top: 10px; padding: 10px 20px; background: #fff; border-radius: 10px; }
#wrap .listArea > ul > li .moreInfo .cont > ul > li:first-child { margin-top: 0; }
/*---------- listView End ----------*/

/*---------- add/modify Start ----------*/
/*-- basicArea --*/
#wrap .detail.basic { padding-top: 20px; }
#wrap .detail.basic .cont { padding: 10px 5%; background: #fff; }
#wrap .detail.basic .cont > p { position: relative; padding: 5px 0 5px 70px; }
#wrap .detail.basic .cont > p > span { position: absolute; top: 2px; left: 0; width: 65px; font-size: 14px; line-height: 36px; }
#wrap .detail.basic .cont > p > input,
#wrap .detail.basic .cont > p > textarea { width: 100%; padding: 7px 15px; font-size: 14px; line-height: 20px; border-radius: 5px; }
#wrap .detail.basic .cont > p > textarea { max-width: 100%; min-width: 100%; height: 114px; }

/*-- orderArea --*/
#wrap .detail.order { overflow: hidden; margin: 20px 0 60px; background: #fff; }
#wrap .detail.order .title { position: relative; padding: 10px 5%; font-size: 14px; font-weight: bold; line-height: 20px; }
#wrap .detail.order .cont { text-align: center; }
#wrap .detail.order .cont .search { position: relative; width: 90%; margin: 0 auto; padding-right: 50px; text-align: left; box-sizing: border-box; border-radius: 5px 0 0 5px; }
#wrap .detail.order .cont .search .inputSearch { width: 100%; padding: 7px 15px; font-size: 14px; line-height: 20px; border-right: none; border-radius: 5px 0 0 5px; }
#wrap .detail.order .cont .search .btnSearch { position: absolute; top: 0; right: 0; width: 50px; height: 36px; border-radius: 0 5px 5px 0; background: #258BF9 url('../Images/icon_search.png') center/20px no-repeat; }

/*-- orderList --*/
#wrap .detail.order .cont .orderList { min-height: 150px; padding-bottom: 20px; text-align: left; }
#wrap .detail.order .cont .orderList > ul > li { padding-top: 10px; }
#wrap .detail.order .cont .orderList > ul > li  p { overflow: hidden; position: relative; min-height: 20px; padding: 2px 5% 2px 120px; font-size: 14px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; }
#wrap .detail.order .cont .orderList > ul > li p span { position: absolute; top: 2px; left: 50px; width: 75px; color: #888; }

#wrap .detail.order .cont .orderList .orderInfo { position: relative; padding: 10px 0; border: 1px solid #4689F1; border-radius: 10px; background: #CDE1FC; }
#wrap .detail.order .cont .orderList .orderInfo:before { content: ''; display: block; position: absolute; top: 50%; left: 5%; width: 20px; height: 20px; margin-top: -10px; background: url('../Images/icon_radioUnchecked.png') center center / 20px 20px no-repeat; }
#wrap .detail.order .cont .orderList .orderInfo.on:before { background-image: url('../Images/icon_radioChecked.png'); }
#wrap .detail.order .cont .orderList .orderInfo input[type=radio] { display: none; position: absolute; top: 25px; left: 10px; width: 15px; height: 15px; margin-top: -7px; }
#wrap .detail.order .cont .orderList .orderInfo label { display: block; }

#wrap .detail.order .cont .orderList .devInfo { display: none; padding: 0 5% 10px; }
#wrap .detail.order .cont .orderList .devInfo .receive { position: relative; margin-top: 10px; padding: 10px; background: #EFF6FF; }
#wrap .detail.order .cont .orderList .devInfo .receive:first-child { margin-top: 0; }
#wrap .detail.order .cont .orderList .devInfo .receive p { float: left; width: 50%; min-height: 24px; padding-left: 75px; padding-right: 5px; box-sizing: border-box; }
#wrap .detail.order .cont .orderList .devInfo .receive p.special { padding-left: 85px; }
#wrap .detail.order .cont .orderList .devInfo .receive p.w100 { width: 100%; padding-right: 30px; }
#wrap .detail.order .cont .orderList .devInfo .receive p span { left: 5px; }
#wrap .detail.order .cont .orderList .devInfo .receive p input { width: 100%; height: 18px; padding: 0 5px; font-size: 12px; line-height: 16px; }
#wrap .detail.order .cont .orderList .devInfo .receive .del { position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; background: url('../Images/icon_cansel.png') center/14px no-repeat;}

/*-- buttonArea --*/
#footer .btnArea { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 0; text-align: center; background: #fff; }
#footer .btnArea button { display: inline-block; width: 26%; margin: 0 13%; padding: 9px 0; font-size: 14px; line-height: 20px; vertical-align: top; border-radius: 20px; box-sizing: border-box; }
#footer .btnArea button.agree { color: #fff; background-color: #4689F1; margin-right: 0; }
#footer .btnArea button.close { color: #4689F1; border: 1px solid #4689F1; }
/*---------- add/modify End ----------*/